<template>
    <div>
        <HomeView></HomeView>
        <div class="order">
            <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            <el-table
                :data="table"
                style="width: 100%">
                <el-table-column
            
                    prop="carKey"
                    label="车辆编号"
                    width="180">
                </el-table-column>
                <el-table-column
                
                    prop="license"
                    label="车牌号"
                    width="180">
                </el-table-column>
                <el-table-column
                
                    prop="status"
                    label="状态">
                </el-table-column>
                <el-table-column
    
                    prop="type"
                    label="类型">
                </el-table-column>
                <el-table-column
    
                    prop="brand"
                    label="品牌">
                </el-table-column>
                <el-table-column
                    
                    prop="color"
                    label="颜色">
                </el-table-column>
                <el-table-column
    
                    prop="address"
                    label="地址">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="Naw">刷新</el-button>
                </el-table>
                <el-dialog title="车辆信息" :visible.sync="dialogVisible" width="30%">
                    <el-form ref="form" :model="table" label-width="80px">
                        
                        <el-form-item label="车牌号">
                        <el-input v-model="table.license"></el-input>
                        </el-form-item>
                        <el-form-item label="车辆状态">
                        <el-input v-model="table.status"></el-input>
                        </el-form-item>
                        <el-form-item label="类型">
                        <el-input v-model="table.type"></el-input>
                        </el-form-item>
                        <el-form-item label="价格">
                        <el-input v-model="table.price"></el-input>
                        </el-form-item>
                        <el-form-item label="所在地区">
                        <el-input v-model="table.address"></el-input>
                        </el-form-item>
                        <el-form-item label="颜色">
                        <el-input v-model="table.color"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌">
                        <el-input v-model="table.brand"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="add">确 定</el-button>
                    </span>
                    </el-dialog>
                
    
    
    
        </div>
    </div>
    </template>
    
    <script>
    import HomeView from './HomeView.vue';
    export default{
        components:{
            HomeView
        },
        data(){
            return{
                dialogVisible:false,
                table:[],
            }
        },
        created(){
    
            this.$axios.post('/car/carList',{},{
              headers:{
                "token":JSON.parse(localStorage.getItem('user')).token
              } 
              })
            .then(response =>{
                    this.form = response.data.data;
                    this.table=this.form
                    for(let i=0;i<this.table.length;i++){
                        this.table[i].id=i
                    }
                })
        },
        methods:{
            add(){
                this.dialogVisible = true
                this.$axios.post('/car/addCar',{
                    license:this.table.license,
                    status:this.table.status,
                    type:this.table.type,
                    price:this.table.price,
                    address:this.table.address,
                    color:this.table.color,
                    brand:this.table.brand
                },{
                    headers:{
                        "token":JSON.parse(localStorage.getItem('user')).token
                    }
                })
                .then(res=>{
                    if(res.data.msg=='success'){
                        alert("新增成功")
                    }
                    else{
                        alert("新增失败")
                    }
                })
                this.$router.go(0)  
                this.dialogVisible=false
            },
            del(id){
                    var car = this.table[id]
                    // car.carKey = JSON.parse(car.carKey)
                    this.$axios.post('/car/deleteCar',{
                        license:car.license
                    },
                    {
                        headers:{
                            "token":JSON.parse(localStorage.getItem('user')).token
                        } 
                        }
                    )
                    .then(res=>{
                        if(res.data.msg=="success"){
                            alert("删除成功")
                            this.$router.go(0)  
                        }
                        else{
                            alert("")
                        }
                    })
                }
        }
    }
    </script>